<template>
	<view class="container">
		<!-- 消息提醒 -->
		<uni-popup ref="popup" type="message">
			<uni-popup-message type="success" :message="''+warnmsg" :duration="2000">
				{{warnmsg}}
			</uni-popup-message>
		</uni-popup>
		<!-- 游戏主体 -->
		<view class="game-body">
			<view class="heading">
				<text class="title">2048</text>
				<!-- 暂停按钮 -->
				<view class="pause-background-container" @click="openPausePopUp()">
					<view class="pause-image-container">
					</view>
				</view>
				<view class="scores-container">

					<view class="score-container">{{gameData.score}}</view>
					<view class="best-container">{{gameData.higest}}</view>
				</view>
			</view>

			<view class="above-game">
				<text class="game-intro">你能拿到2048吗？</text>
				<view class="revocation-button" @click="revocation()"></view>
				<text class="restart-button" @click="newGame()">新游戏</text>
			</view>

			<view class="game-container" @touchstart="start" @touchend="end">
				<!--游戏结束显示  -->
				<view>
					<text class="over-msg" v-if="gameData.gameState==3">{{overMsg}}</text>
					<view class="lower">
						<!-- <text class="keep-playing-button">继续</text> -->
					</view>
				</view>

				<view class="grid-container">
					<!-- 游戏进行时的数据展示 -->
					<view v-if="gameData.gameState!=3" v-for="(rowData,i) in gameData.tiles" :key="i" class="grid-row">
						<view v-for="(cell,j) in rowData" :key="j" class="grid-cell">
							<view :class="'tile tile-'+cell.value">
								<view v-if="cell" class="tile-inner">
									{{cell.value}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 暂停页面 -->
		<view class="pause-container" v-show="isPause">
			<view class="pause-body" >
			    <view class="pause-heading">
			      	<text class="pause-title" @click="closePausePopUp()">游戏暂停</text>
			    </view>
			    <view class="pause-option-container">
					<view class="pause-close" @click="closePausePopUp()">
						
					</view>
					<view class="pause-to-game" @click="closePausePopUp()">
						
					</view>
					<view class="pause-grid-container" >
						<!-- 主页 -->
						<view class="home-page" @click="toHomeGage()"></view>
						<!-- 重新开始 -->
						<view class="pause-restart-button" @click="toNewGame()"></view>
						<!-- 帮助 -->
						<view class="help" @click="toHelp()"></view>
						<!-- 排行榜 -->
						<view class="rank-list" @click="toRankList()"></view>
					</view> 
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import myApp from "../../App.vue";
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
	export default {
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog
		},
		data() {
			return {
				gameData: {
					"score": 20,
					"higest": 20,
					"hasMoved": true,
					"gameState": 3,
					"tiles": [
						[{
								"merged": false,
								"value": 8
							},
							{
								"merged": false,
								"value": 8
							},
							{
								"merged": false,
								"value": 8
							},
							{
								"merged": false,
								"value": 8
							}
						],
						[{
								"merged": false,
								"value": 4
							},
							{
								"merged": false,
								"value": 4
							},
							{
								"merged": false,
								"value": 4
							},
							{
								"merged": false,
								"value": 4
							}
						],
						[{
								"merged": false,
								"value": 2
							},
							{
								"merged": false,
								"value": 4
							},
							{
								"merged": false,
								"value": 4
							},
							{
								"merged": false,
								"value": 16
							}
						],
						[{
								"merged": false,
								"value": 4
							},
							{
								"merged": false,
								"value": 2
							},
							{
								"merged": false,
								"value": 2
							},
							{
								"merged": false,
								"value": 2
							}
						]
					]

				},
				grids: 1,
				overMsg: "游戏结束",
				startData: {
					clientX: '',
					clientY: ''
				},
				move: 0,
				//提示信息
				warnmsg: "",
				isPause:false
			}
		},
		methods: {
			//开始游戏
			newGame() {
				var that = this;
				uni.request({
					url: that.$websiteUrl + "/start",
					header: {
						token: this.$getToken()
					},
					success: (res) => {
						console.log("newGame_" + res.data.data.gameState);
						this.gameData = res.data.data;
					}
				});
			},
			//记录滑动方向
			start(e) {

				this.startData.clientX = e.changedTouches[0].clientX;
				this.startData.clientY = e.changedTouches[0].clientY;
			},
			end(e) {
				const subX = e.changedTouches[0].clientX - this.startData.clientX;
				//xoy原点在左上角
				const subY = this.startData.clientY - e.changedTouches[0].clientY;
				//上滑
				if (subY > 0) {
					if (subX > 0) {
						if (subY > subX) {
							this.move = 1;
							console.log('上滑')
						} else {
							this.move = 4;
							console.log('右滑')
						}
					}
					if (subX <= 0) {
						if (subY > -subX) {
							this.move = 1;
							console.log('上滑')
						} else {
							this.move = 3;
							console.log('左滑')
						}
					}
				}
				//下滑
				else {
					if (subX > 0) {
						if (-subY > subX) {
							this.move = 2;
							console.log('下滑')
						} else {
							this.move = 4;
							console.log('右滑')
						}
					}
					if (subX <= 0) {
						if (-subY > -subX) {
							this.move = 2;
							console.log('下滑')
						} else {
							this.move = 3;
							console.log('左滑')
						}
					}
				}
				this.run();
			},
			//下一步
			//游戏运行
			run() {
				uni.request({
					url: this.$websiteUrl + "/run",
					data: {
						move: this.move
					},
					header: {
						token: this.$getToken()
					},
					success: (res) => {
						console.log(res.data.data);
						this.gameData = res.data.data;
					}
				});
			},
			//撤销游戏	
			revocation() {
				//游戏刚开始，不能撤销
				if (this.gameData.gameState == 4) {
					this.warnmsg = "当前最多只能撤销三次！";
					this.$refs.popup.open();
				} else if (this.gameData.gameState == 0) {
					this.warnmsg = "游戏刚开始，不能撤销！";
					this.$refs.popup.open();
				} else {
					var that = this;
					uni.request({
						url: that.$websiteUrl + "/revocation",
						header: {
							//	token:that.$getToken()
							token: "asd6a4w6d46aw46asd"
						},
						success: (res) => {
							//撤销次数达到上限了
							if (!res.data.data) {
								console.log("撤销 is null");
							
								this.warnmsg = "当前最多只能撤销三次！";
								this.$refs.popup.open();
							} else {
								console.log("run-has data");
								this.gameData = res.data.data;
							}

						}
					});
				}

			},
			//显示暂停弹窗
			openPausePopUp() {
				this.isPause=true;
			},
			//关闭暂停弹窗
			closePausePopUp(){
				this.isPause=false;
			},
			//在弹窗中点击开始新游戏
			toNewGame(){
				this.closePausePopUp();
				this.newGame();
			},
			//切换来到游戏主页
			toHomeGage(){
				myApp.gameData = this.gameData;
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			//切换到帮助页
			toHelp(){
				uni.navigateTo({
				    url: './help'
				});
			},
			toRankList(){
				uni.navigateTo({
				    url: './rank-list'
				});
			}


		},

		onLoad() {
			//看是否有上次游戏，没有则加载新游戏
			console.log("1111111111");
			console.log(this.gameData);
			if(myApp.gameData===""||myApp.gameData==null){
				this.newGame();
			}
			else if(myApp.gameData.gameState==3){
				console.log("gameState load");
				this.newGame();
			}else{
				this.gameData = myApp.gameData;
			}
		},
		onShareAppMessage() {
			console.log("靓仔");
			return {
				title: "是靓仔就来玩",
				path: "pages/2048/index",
				imageUrl: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1591778432&di=a2d7136fdcd0762d40fb005ceb18cc58&src=http://dingyue.nosdn.127.net/FPk07clKtcNGDYgclqvBwmX2dHfeXonyadnce9nTiyxYV1537869595480.jpeg"
			}
		}
	}
</script>

<style>
	@import url("./index.css");
</style>
